<template>
  <div>
    <div class="filter-container">
      <!--字典类别key搜索   @keyup.enter.native="page1SearchPageList" 表示按回车进行搜索 page1SearchPageList是搜索方法 -->
      <el-input
        v-model="search.e_name"
        placeholder="请输入姓名"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <el-input
        v-model="search.e_phone"
        placeholder="请输入手机号"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="page1SearchPageList" 代表点击执行搜索方法 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="page1SearchPageList"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="success"
        icon="el-icon-edit"
        @click="ddtCreateShow"
      >
        添加
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="danger"
        icon="el-icon-edit"
        @click="ddtCreatedelall"
      >
        批量删除
      </el-button>
    </div>

    <el-table
      ref="delalldec"
      :data="list"
      style="width: 100%"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="e_name" label="姓名"> </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.e_sex == true">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="e_phone" label="手机号"> </el-table-column>
      <el-table-column prop="e_academy" label="院校"> </el-table-column>
      <el-table-column prop="e_major" label="专业"> </el-table-column>
      <el-table-column prop="e_family" label="家庭住址"> </el-table-column>
      <el-table-column prop="e_datetime" label="入职日期"> </el-table-column>
      <el-table-column prop="e_native_place" label="籍贯"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handledel(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="handleClick(scope.row.id)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      :pageSizes="[5, 10, 15, 20]"
      @pagination="searchPageList"
    />

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="dicTypeForm"   表单命名,类似于以前的id-->
      <!--:rules="rules"   对应的验证规则, rules 验证规则json 下面有定义-->
      <!--:model="adminUserInfo"   表单绑定的数据模型-->
      <!---label-width="120px" 设置标签宽度,如果不设置会产生错位问题-->
      <el-form
        ref="dicTypeForm"
        :rules="rules"
        :model="dicTypInfo"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="🍁姓名">
              <el-input v-model="dicTypInfo.e_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="🍁政治面貌">
              <el-input v-model="dicTypInfo.e_politics_status"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="🍁手机号">
              <el-input v-model="dicTypInfo.e_phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="🍁院校">
              <el-input v-model="dicTypInfo.e_academy"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="🍁专业">
              <el-input v-model="dicTypInfo.e_major"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="🍁家庭住址">
              <el-input v-model="dicTypInfo.e_family"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="民族">
              <el-input v-model="dicTypInfo.e_nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="籍贯">
              <el-input v-model="dicTypInfo.e_native_place"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="婚姻">
              <el-input v-model="dicTypInfo.e_marriage"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="入职日期">
              <el-date-picker
                type="date"
                placeholder="入职日期"
                v-model="dicTypInfo.e_datetime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱">
              <el-input v-model="dicTypInfo.e_emailes"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="身份证号">
              <el-input v-model="dicTypInfo.e_identity"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addDictType() : updateDictType()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitleupdate" :visible.sync="dialogFormVisibles">
      <el-form
        :rules="rules"
        :model="tableData"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="姓名">
              <el-input v-model="tableData.e_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="政治面貌">
              <el-input v-model="tableData.e_politics_status"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="手机号">
              <el-input v-model="tableData.e_phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="院校">
              <el-input v-model="tableData.e_academy"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="专业">
              <el-input v-model="tableData.e_major"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="家庭住址">
              <el-input v-model="tableData.e_family"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="民族">
              <el-input v-model="tableData.e_nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="籍贯">
              <el-input v-model="tableData.e_native_place"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="婚姻">
              <el-input v-model="tableData.e_marriage"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="入职日期">
              <el-date-picker
                type="date"
                placeholder="入职日期"
                v-model="tableData.e_datetime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱">
              <el-input v-model="tableData.e_emailes"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="身份证号">
              <el-input v-model="tableData.e_identity"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDictType()"> 保存 </el-button>
        <el-button @click="dialogFormVisibles = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>


  <script>
import {
  dttGetAll,
  dttCreated,
  del,
  delAll,
  pagess,
  Eintyess,
} from "@/api/system_base/Employee_registration";
import Pagination from "@/components/Pagination"; // 引入分页组件

export default {
  name: "Employee_registration",
  components: { Pagination },
  data() {
    return {
      tableData: [],
      list: null, //表格绑定数据
      listLoading: true, //是否显示加载提示
      total: 0, //总行数
      search: {
        //搜索对象
        page: 1, //当前页
        maxResultCount: 5, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        e_name: "", //员工姓名
        e_phone: "", //  员工手机号
      },
      dialogFormVisible: false, // 是否显示弹出层
      dialogTitle: "", // 弹出层标题
      dialogFormVisibles: false,
      dialogTitleupdate: "",
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      dicTypInfo: {},
    };
  },
  created() {
    this.searchPageList();
    this.resetDicinfo();
  },
  methods: {
    searchPageList() {
      // 搜索方法
      this.listLoading = true; // 显示加载效果

      this.search.skipCount =
        (this.search.page - 1) * this.search.maxResultCount;

      dttGetAll(this.search).then((response) => {
        // 调用分页接口
        this.list = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    ddtCreateShow() {
      //弹出添加页面
      this.resetDicinfo();
      this.dialogStatus = "1"; // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = "基本信息";
      this.dialogFormVisible = true; // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs["dicTypeForm"].clearValidate(); // 清理验证
      });
    },
    addDictType() {
      //添加方法
      this.$refs["dicTypeForm"].validate((valid) => {
        if (valid) {
          dttCreated(this.dicTypInfo).then((response) => {
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "添加成功",
              message: "添加员工信息成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    resetDicinfo() {
      // 初始化用户对象
      this.dicTypInfo = {
        e_name: "",
        e_politics_status: "",
        e_phone: "",
        e_academy: "",
        e_major: "",
        e_family: "",
        e_nation: "",
        e_native_place: "",
        e_marriage: "",
        e_emailes: "",
        e_identity: "",
        e_datetime: "",
      };
    },
    handledel(id) {
      if (confirm("确认删除数据吗？")) {
        del(id).then((res) => {
          this.$message.success("删除成功");
          this.page1SearchPageList();
        });
      }
    },
    ddtCreatedelall() {
      var arid = [];
      var id = this.$refs.delalldec.selection;
      id.forEach((res) => {
        arid.push(res.id);
      });

      if (arid.length == 0) {
        this.$message("请选择要删除的数据");
        return;
      }

      if (confirm("确认要删除数据嘛？")) {
        arid.forEach((res) => {
          var dd = res;
          delAll(dd).then((res) => {
            this.page1SearchPageList();
          });
          this.$message.success("批删成功");
        });
      }
    },
    handleClick(id) {
      this.dialogFormVisibles = true;
      pagess(id).then((r) => {
        
        if (r.result != null) {
          var that = this;
          that.tableData = r.result;
        }
      });
    },
    updateDictType() {
      Eintyess(this.tableData).then((r) => {
        this.dialogFormVisibles = false;
        this.searchPageList();
        this.$notify({
              title: "修改成功",
              message: "修改员工信息成功",
              type: "success",
              duration: 2000,
            });
      });
    },
  },
};
</script>

<style >
.search_input {
  width: 200px;
}
</style>